<!--
 * @Descripttion: 
 * @Version: 
 * @Author: gaohj
 * @Date: 2023-01-13 09:34:44
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2023-01-13 10:24:47
-->
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>济南前端2203随机点名器</title>

		<style>
			* {
				margin: 0;
				padding: 0;
			}
			
			.top {
				width: 100%;
				height: 70px;
			}
			
			.mid {
				width: 550px;
				height: 280px;
				margin: auto;
				padding: 15px;
				border-radius: 25px;
				background-color: #ff751a;
			}
			
			.mid_top {
				height: 55px;
				background-color: #ff751a;
			}
			
			.mid_mid {
				width: 300px;
				height: 87px;
				margin: auto;
				background-color: #A4A4A4;
				border-radius: 15px;
				vertical-align: middle;
				line-height: 87px;
			}
			
			.kk {
				height: 26px;
			}
			
			.button {
				width: 145px;
				height: 50px;
				border-radius: 8px;
				border: 0px;
				background-color: #89F221;
				font-size: 25px;
				font-family: "微软雅黑";
			}
		</style>
	</head>

	<body>
		<!--顶层 -->
		<div class="top"></div>

		<!--中间层 -->
		<div class="mid">
			<!--中间层顶部 -->
			<div class="mid_top"></div>
			<!--中间层中间 -->
            <img src="1.png" alt="">
			<div id="display" class="mid_mid" align="center" style="font-size:288%">前端扛把子</div>
			<div class="kk"></div>
			<div class="mid_bottom" align="center"><input id="click" class="button" type="button" value="开始"/></div>
		</div>
        <script>
            // 随机数  随机数组的索引 Math.random() 0-1之间的随机数
            // 根据索引获取数组中的值
            // 把值放到指定的位置  innerHTML 赋值
            // 不断的拿 不断的放 定时器
            // 点击按钮 样式发生变化 


            // 1.获取元素
            var display = document.getElementById("display");
            var btn = document.getElementById("click");
            var myimgs = document.querySelector("img");
            // 2.定义数组
            var imgs = ['0.png','1.png','2.png','3.png','4.png','5.png','6.png','7.png','8.png','9.png','10.png','11.png','12.png','13.png','14.png','15.png','16.png','17.png','18.png','19.png','20.png','21.png','22.png','23.png'];
            var names = ["张乃涛","杜文恺","王择先","史敬浩","肖帅","张世炜","赵洪斌","张钰","褚安松","张荣霄","李晓平","赵立安","倪宇航","张正鹏","孟凡坤","董盼盼","孙悦","杨关瑞","杨璐","秦恩源","冉文豪","左瑞斌","王佳宁","边胜龙"];

            
            
            var mytime = null;
            function show(){
                // 3. 生成随机数 
                var num = Math.floor(Math.random()*24);
                display.innerHTML = names[num];
                // imgs[num] = "images/"+imgs[num];
                myimgs.src = "images/"+imgs[num];
                mytime = setTimeout(show,50);
            }

            // show();
            btn.onclick = function(){
                // 如果 mytime 是null 说明没有定时器  
                // 按钮的状态是 开始 绿色 

                // 如果 mytime 不是null 说明有定时器
                // 按钮的状态是 停止 红色
                if(mytime == null){ 

                    show();
                    btn.value = "停止";
                    btn.style.backgroundColor = "red";
                    

                }
                else{
                    clearTimeout(mytime); // 开始的状态 点击停止
                    mytime = null; // 把定时器的值清空  
                    btn.value = "开始";
                    btn.style.backgroundColor = "#89F221";
                }
            }

            // 扩展 把名字放进去的同时  头像也放进去  

        </script>
	</body>
</html>